import { useState, useEffect } from 'react';
import { AxisConfig } from '../types';

// 预设类型定义
interface AxisPreset {
    name: string;
    config: {
        xAxis: AxisConfig;
        yAxis: AxisConfig;
    };
    isDefault?: boolean;
}

/**
 * 默认的坐标轴预设
 */
const defaultPresets: AxisPreset[] = [
    {
        name: '标准样式',
        isDefault: true,
        config: {
            xAxis: {
                axisLabel: {
                    show: true,
                    rotate: 0,
                    color: '#333',
                    fontSize: 12
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#333',
                        width: 1,
                        type: 'solid'
                    }
                },
                axisTick: {
                    show: true,
                    length: 5,
                    lineStyle: {
                        color: '#333',
                        width: 1,
                        type: 'solid'
                    }
                },
                splitLine: {
                    show: false
                },
                nameShow: false
            },
            yAxis: {
                axisLabel: {
                    show: true,
                    rotate: 0,
                    color: '#333',
                    fontSize: 12
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#333',
                        width: 1,
                        type: 'solid'
                    }
                },
                axisTick: {
                    show: true,
                    length: 5,
                    lineStyle: {
                        color: '#333',
                        width: 1,
                        type: 'solid'
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#E0E0E0',
                        width: 1,
                        type: 'dashed'
                    }
                },
                nameShow: false
            }
        }
    },
    {
        name: '商务风格',
        isDefault: true,
        config: {
            xAxis: {
                axisLabel: {
                    show: true,
                    rotate: 0,
                    color: '#666',
                    fontSize: 12,
                    fontWeight: 'bold'
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#1890ff',
                        width: 2,
                        type: 'solid'
                    }
                },
                axisTick: {
                    show: true,
                    length: 5
                },
                splitLine: {
                    show: false
                },
                nameShow: true,
                name: '日期',
                nameLocation: 'end',
                nameTextStyle: {
                    color: '#1890ff',
                    fontSize: 14,
                    fontWeight: 'bold'
                }
            },
            yAxis: {
                axisLabel: {
                    show: true,
                    color: '#666',
                    fontSize: 12,
                    fontWeight: 'bold'
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#1890ff',
                        width: 2,
                        type: 'solid'
                    }
                },
                axisTick: {
                    show: true,
                    length: 5
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#e8e8e8',
                        type: 'dashed',
                        width: 1
                    }
                },
                nameShow: true,
                name: '数值',
                nameLocation: 'end',
                nameTextStyle: {
                    color: '#1890ff',
                    fontSize: 14,
                    fontWeight: 'bold'
                }
            }
        }
    },
    {
        name: '暗色主题',
        isDefault: true,
        config: {
            xAxis: {
                axisLabel: {
                    show: true,
                    rotate: 0,
                    color: '#eee',
                    fontSize: 12
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#eee',
                        width: 1,
                        type: 'solid'
                    }
                },
                axisTick: {
                    show: true
                },
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                axisLabel: {
                    show: true,
                    rotate: 0,
                    color: '#eee',
                    fontSize: 12
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#eee',
                        width: 1,
                        type: 'solid'
                    }
                },
                axisTick: {
                    show: true
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#555',
                        width: 1,
                        type: 'dashed'
                    }
                }
            }
        }
    },
    {
        name: '科技风格',
        isDefault: true,
        config: {
            xAxis: {
                axisLabel: {
                    show: true,
                    rotate: 45,
                    color: '#00c1de',
                    fontSize: 12
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#00c1de',
                        width: 1,
                        type: 'solid'
                    }
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                axisLabel: {
                    show: true,
                    color: '#00c1de',
                    fontSize: 12
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#00c1de',
                        width: 1,
                        type: 'solid'
                    }
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(0, 193, 222, 0.2)',
                        type: 'solid',
                        width: 1
                    }
                }
            }
        }
    },
    {
        name: '简洁风格',
        isDefault: true,
        config: {
            xAxis: {
                axisLabel: {
                    show: true,
                    rotate: 0,
                    color: '#333',
                    fontSize: 12
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                axisLabel: {
                    show: true,
                    color: '#333',
                    fontSize: 12
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#f5f5f5',
                        type: 'solid',
                        width: 1
                    }
                }
            }
        }
    },
    {
        name: '大字体',
        isDefault: true,
        config: {
            xAxis: {
                axisLabel: {
                    show: true,
                    rotate: 0,
                    color: '#333',
                    fontSize: 16,
                    fontWeight: 'bold'
                },
                axisLine: {
                    show: true
                },
                axisTick: {
                    show: true
                }
            },
            yAxis: {
                axisLabel: {
                    show: true,
                    rotate: 0,
                    color: '#333',
                    fontSize: 16,
                    fontWeight: 'bold'
                },
                axisLine: {
                    show: true
                },
                axisTick: {
                    show: true
                }
            }
        }
    },
    {
        name: '无分割线',
        isDefault: true,
        config: {
            xAxis: {
                axisLabel: {
                    show: true,
                    color: '#333',
                    fontSize: 12
                },
                axisLine: {
                    show: true
                },
                axisTick: {
                    show: true
                },
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                axisLabel: {
                    show: true,
                    color: '#333',
                    fontSize: 12
                },
                axisLine: {
                    show: true
                },
                axisTick: {
                    show: true
                },
                splitLine: {
                    show: false
                }
            }
        }
    },
    {
        name: '简约名称',
        isDefault: true,
        config: {
            xAxis: {
                axisLabel: {
                    show: true,
                    color: '#999',
                    fontSize: 12
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#e8e8e8'
                    }
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                nameShow: true,
                name: 'X轴',
                nameLocation: 'end',
                nameTextStyle: {
                    color: '#999',
                    fontSize: 12
                }
            },
            yAxis: {
                axisLabel: {
                    show: true,
                    color: '#999',
                    fontSize: 12
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#e8e8e8'
                    }
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#f5f5f5'
                    }
                },
                nameShow: true,
                name: 'Y轴',
                nameLocation: 'end',
                nameTextStyle: {
                    color: '#999',
                    fontSize: 12
                }
            }
        }
    }
];

/**
 * 使用坐标轴预设钩子
 */
export const useAxisPresets = () => {
    // 存储所有预设
    const [presets, setPresets] = useState<AxisPreset[]>([]);

    // 初始化预设
    useEffect(() => {
        const savedPresets = localStorage.getItem('axis-presets');
        let userPresets: AxisPreset[] = [];

        if (savedPresets) {
            try {
                userPresets = JSON.parse(savedPresets);
            } catch (e) {
                console.error('解析预设失败', e);
            }
        }

        // 合并默认预设和用户预设
        setPresets([...defaultPresets, ...userPresets]);
    }, []);

    // 保存预设
    const savePresets = (updatedPresets: AxisPreset[]) => {
        // 分离用户预设和默认预设
        const userPresets = updatedPresets.filter(preset => !preset.isDefault);
        
        // 只保存用户预设
        localStorage.setItem('axis-presets', JSON.stringify(userPresets));
        
        // 更新状态，包含所有预设
        setPresets(updatedPresets);
    };

    // 将当前配置保存为预设
    const saveAsPreset = (name: string, config: any): boolean => {
        // 检查名称是否已存在
        const existingIndex = presets.findIndex(p => p.name === name);
        
        // 创建新的预设对象
        const newPreset: AxisPreset = {
            name,
            config
        };

        let newPresets = [...presets];
        
        if (existingIndex >= 0) {
            // 如果是默认预设，不允许覆盖
            if (presets[existingIndex].isDefault) {
                return false;
            }
            
            // 更新已存在的预设
            newPresets[existingIndex] = newPreset;
        } else {
            // 添加新预设
            newPresets.push(newPreset);
        }

        // 保存更新后的预设
        savePresets(newPresets);
        return true;
    };

    // 删除预设
    const deletePreset = (name: string) => {
        const preset = presets.find(p => p.name === name);
        
        // 默认预设不能删除
        if (!preset || preset.isDefault) {
            return false;
        }

        // 过滤掉要删除的预设
        const newPresets = presets.filter(p => p.name !== name);
        savePresets(newPresets);
        return true;
    };

    return {
        allPresets: presets,
        saveAsPreset,
        deletePreset
    };
};